<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    #root {
      width: 800px;
      margin: auto
    }

    .basic {
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }

    .happy {
      border: 4px solid red;
      ;
      background-color: rgba(255, 255, 0, 0.644);
      background: linear-gradient(30deg, yellow, pink, orange, yellow);
    }

    .sad {
      border: 4px dashed rgb(2, 197, 2);
      background-color: gray;
    }

    .normal {
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <div id="root">
    <app></app>
  </div>
  <script>
    Vue.config.productionTip = false

    const stu = Vue.extend({
      template: `
      <div>
        {{name}}
        </div>`,
      data() {
        return { name: 'shuo' }
      },

    })

    const school = Vue.extend({
      template: `
      <div>
        {{sName}}
        <stu></stu>
        </div>`,
      data() {
        return { sName: '尚硅谷' }
      },
      components: {
        stu
      }
    })

    const app = {
      template: `
      <div>
        <school></school>
        </div>`,
      components: {
        school
      }
    }

    new Vue({
      el: '#root',
      components: {
        app
      },
      data: {
        mood: 'normal',
        n: 10,
        opacity: 1
      },
      methods: {
        changeMood() {
          const arr = ['normal', 'happy', 'sad']
          this.mood = 'happy'
        }
      },
      computed: {},
      watch: {},
      directives: {
        big(e, binding) {
          e.innerText = binding.value * 10
        }
      }
    })

  </script>
</body>

</html>